<template>
  <!-- 判断 -->
  <el-form
    ref="form"
    :model="form"
    :disabled="readonly"
    :rules="rules"
    label-width="140px"
  >
    <el-form-item label="题干" prop="stem">
      <el-input
        :maxlength="200"
        show-word-limit
        type="textarea"
        v-model.trim="form.stem"
        rows="4"
        class="textareaClass"
        placeholder="请输入题干"
      ></el-input>
    </el-form-item>
    <el-row>
      <el-col :span="12">
        <el-form-item label="答案：" prop="answer">
          <el-radio v-model="form.answer" :label="'true'">正确</el-radio>
          <el-radio v-model="form.answer" :label="'false'">错误</el-radio>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
const createModalForm = {
  stem: "",
  options: [
    { questionStems: "", label: "A" },
    { questionStems: "", label: "B" },
    { questionStems: "", label: "C" },
    { questionStems: "", label: "D" },
  ],
  answer: "",
}
export default {
  props: {
    readonly: {
      type: Boolean,
      default: false,
    },
  },
  name: "SanyuanMmFrontIndex",
  data() {
    return {
      // 表单校验
      rules: {
        stem: [
          {
            required: true,
            message: "题干不能为空",
            trigger: ["blur", "change"],
          },
        ],
        answer: [
          {
            required: true,
            message: "请选择答案",
            trigger: ["blur", "change"],
          },
        ],
      },
      form: Object.assign({}, createModalForm),
    }
  },
  watch: {
    form: {
      handler(newVal) {
        this.$emit("formData", newVal)
      },
      deep: true,
    },
  },
  mounted() {},
  methods: {
    addOption() {
      let label = String.fromCharCode(
        "A".charCodeAt() + this.form.options.length
      )
      this.form.options.push({
        questionStems: "",
        label: label,
      })
    },
    delOption(index) {
      this.form.options.splice(index, 1)
    },

    // 表单重置
    reset() {
      this.form = Object.assign({}, createModalForm)
    },
    // 取消按钮
    cancel() {
      this.operatorDialog = false
      this.batchDialog = false
    },

    handleCheckedCitiesChange(value, args) {
      this.form[args.prop] = value.toString().toString()
    },
  },
}
</script>

<style lang="scss" scoped>
.batchPage {
  display: flex;
  flex: 1;
  flex-direction: row;
}
</style>
